<template>
  <view class="pick-up-point-page">
    <view class="list">
      <view
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="pickUp(item)"
      >
        <view class="title">{{
          item.provinceName + item.cityName + item.countyName + item.address
        }}</view>
        <view class="time" v-if="false">自提时间{{ item.time }}</view>
        <view :class="['go', { active: item.id == select }]">{{
          item.id == select ? "已选择" : "去这里"
        }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
import { requestGet } from "@/utils/request";
export default {
  data() {
    return {
      select: 0,
      list: null,
      current: 1,
      activeTab: "",
      total: 0,
      loadAll: false, // 已加载全部
      keyId: 0,
    };
  },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    ...mapMutations(["SELECT_PICK_UP_POINT"]),

    _getList() {
      requestGet(`/shop/mobile/store/centers/${this.id}`)
        .then((res) => {
          if (res.code === 200) {
            this.total = res.total;
            this.list =
              this.current === 1 ? res.rows : this.list.concat(res.rows);
            this.keyId++;
          } else {
            this.list = [];
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    getList() {
      requestGet(`/shop/mobile/store/centers/${this.id}`)
        .then((res) => {
          if (res.code === 200) {
            this.list = res.data;
            if (this.$store.state.selectPickUpPoint.id) {
              this.select = this.$store.state.selectPickUpPoint.id;
            } else {
              this.select = this.list[0].id;
            }
          } else {
            this.list = [];
          }
        })
        .catch((err) => console.log("错误了", err));
    },
    pickUp(item) {
      this.select = item.id;
      this.SELECT_PICK_UP_POINT(item);
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss">
.pick-up-point-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  .list {
    padding: 0 32rpx;
  }
  .item {
    position: relative;
    padding: 40rpx 0;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
    .title {
      padding-right: 168rpx;
      font-size: 28rpx;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.8);
      line-height: 40rpx;
    }
    .time {
      margin-top: 16rpx;
      font-size: 24rpx;
      font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 34rpx;
    }
    .go {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 40rpx;
      right: 0;
      z-index: 1;
      width: 120rpx;
      height: 48rpx;
      border-radius: 100px;
      background: #3FAA73;
      font-size: 24rpx;
      font-weight: 500;
      color: #fff;
      line-height: 34rpx;
      &.active {
        background: rgba(63,170,115,0.1);
        color: #3FAA73;
      }
    }
  }
}
</style>
